import { useCallback, useRef, useState } from "react"
import UiButton from "./UiButton"
import UiForm, { UiFormItem, UiFormSubmit } from "./UiForm"
import UiModal, { openInformationModal, useModalEvent } from "./UiModal"
import UiInput from "./UiInput"
import UiSelect, { UiOption } from "./UiSelect"
import UiImage from "./UiImage"

export type UiFormButtonProps = {
    form: any[]
    onFinish: (data: any) => string | Promise<string> | void | Promise<void>
    btnProps: {
        text?: string
        okText?: string
        cancelText?: string
    }
}
const UiFormButton = ({
    form,
    onFinish,
    btnProps: {
        text = "点击",
        okText = "确认",
        cancelText = "取消"
    }
}: UiFormButtonProps) => {
    const [ref, open, cancel] = useModalEvent()
    const [loading, setLoading] = useState(false);
    const formRef = useRef<HTMLFormElement>(null)
    const onSubmit = useCallback(async (data: any) => {
        setLoading(true)
        const res = await onFinish(data);
        if (!!res) openInformationModal(() => ({ title: res }))
        else cancel()
        setLoading(false)
    }, [])
    return (
        <>
            <UiModal
                ref={ref}
            >
                <UiForm ref={formRef} onSubmit={onSubmit}>
                    {form.map(({ type, label, name, options, defaultValue, ...rest }, key) => {
                        switch (type) {
                            case "input":
                                return (
                                    <UiFormItem
                                        key={key}
                                        label={label}
                                        name={name}
                                    >
                                        <UiInput
                                            defaultValue={defaultValue}
                                            {...rest}
                                        />
                                    </UiFormItem>
                                )
                            case "number":
                                return (
                                    <UiFormItem
                                        key={key}
                                        label={label}
                                        name={name}
                                    >
                                        <UiInput
                                            type="number"
                                            defaultValue={defaultValue}
                                            {...rest}
                                        />
                                    </UiFormItem>
                                )
                            case "option":
                                return (
                                    <UiFormItem
                                        key={key}
                                        label={label}
                                        name={name}
                                    >
                                        <UiSelect defaultValue={defaultValue} {...rest}>
                                            {options.map(({ name, value }: any) => (
                                                <UiOption value={value} key={name}>
                                                    {name}
                                                </UiOption>
                                            ))}
                                        </UiSelect>
                                    </UiFormItem>
                                )
                            case "avatar":
                                return (
                                    <UiFormItem key={key} label={label} name={name}>
                                        <UiImage width={100} />
                                    </UiFormItem>
                                )
                            default:
                                return (
                                    <div
                                        key={key}
                                    >
                                        null
                                    </div>
                                )
                        }
                    })}
                    <div className="flex justify-end gap-2">
                        <UiFormSubmit>
                            <UiButton loading={loading} submit>
                                {okText}
                            </UiButton>
                        </UiFormSubmit>
                        <UiButton
                            onClick={cancel}
                        >
                            {cancelText}
                        </UiButton>
                    </div>
                </UiForm>
            </UiModal>
            <UiButton onClick={open}>{text}</UiButton>
        </>
    )
}
export default UiFormButton